<template>
  <div class="wrap">
    <Top Top="栏目管理" />

    <div class="remove">
      <p class="del">点击删除以下频道</p>
      <div class="info">
        <div
          class="items"
          v-for="(item,index) in postList"
          :key="item.id"
          @click="handleRemove(index)"
        >{{item.name}}</div>
        <!-- <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>-->
      </div>
    </div>

    <div class="add" v-if="commentList.length>0">
      <p class="add-more">点击添加以下频道</p>
      <div class="info">
        <div
          class="items"
          v-for="(item,index) in commentList"
          :key="item.id"
          @click="handleAdd(index)"
        >{{item.name}}</div>
        <!-- <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>
        <div class="items">推荐</div>-->
      </div>
    </div>
  </div>
</template>

<script>
// 引入顶部组件
import Top from "@/components/Top";

export default {
  components: {
    Top,
  },
  data() {
    return {
      commentList: [],
      postList: [],
    };
  },

  created() {
    //如果本地有就获取本地数据
    if (localStorage.getItem("postList") && localStorage.getItem("commentList")) {
      this.postList = JSON.parse(localStorage.getItem("postList"));
      this.commentList = JSON.parse( localStorage.getItem("commentList"));
    } else {
      //   栏目列表
      //   接口类型:【GET】
      //   验证:【Authorization 】（该接口不强制要求登录，但是对于登录的用户，加上token信息会返回关注栏目）
      //   接口地址: /category
      this.$axios({
        method: "get",
        url: "/category",
      }).then((res) => {
        console.log(res);
        this.postList = [...res.data.data];
      });
    }
  },

  methods: {
    // 移出栏目
    handleRemove(index) {
      if (this.postList.length == 1) {
        return;
      }
      //   console.log('点击了');
      let obj = this.postList.splice(index, 1)[0];
      //  console.log(obj);
      this.commentList.unshift(obj);
      //  console.log(this.commentList);
    },

    // 添加栏目
    handleAdd(index) {
      //    console.log('点击了');
      let obj = this.commentList.splice(index, 1)[0];
      //  console.log(obj);
      this.postList.unshift(obj);
      //  console.log(this.postList);
    },
  },

  watch: {
    // 监测移出栏目
    postList() {
      localStorage.setItem("postList", JSON.stringify(this.postList));
    },

    // 监测添加栏目
    commentList() {
      localStorage.setItem('commentList', JSON.stringify(this.commentList));
    },
  },
};
</script>

<style lang="less" scoped>
.remove {
  font-size: 12/360 * 100vw;
  padding: 0 10/360 * 100vw;
  .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20/360 * 100vw;
    .items {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60/360 * 100vw;
      height: 40/360 * 100vw;
      border: 1/360 * 100vw solid #afafaf;
      font-size: 16/360 * 100vw;
      margin-left: 33/360 * 100vw;
      margin-bottom: 10/360 * 100vw;
      &:nth-child(4n + 1) {
        margin-left: 0;
      }
    }
  }
}

.add {
  font-size: 12/360 * 100vw;
  padding: 0 10/360 * 100vw;
  margin-top: 20/360 * 100vw;
  .info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20/360 * 100vw;
    .items {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60/360 * 100vw;
      height: 40/360 * 100vw;
      border: 1/360 * 100vw solid #afafaf;
      font-size: 16/360 * 100vw;
      margin-left: 33/360 * 100vw;
      margin-bottom: 10/360 * 100vw;
      &:nth-child(4n + 1) {
        margin-left: 0;
      }
    }
  }
}
</style>